<template>
    <el-menu active-text-color="#ffd04b" background-color="rgb(32, 32, 38)" class="el-menu-vertical-demo"
        :default-active="route.path" text-color="#fff" @open="handleOpen" @close="handleClose" :unique-opened="true"
        :collapse="store.state.isCollapse" router>
        <!-- 添加router属性 就是element-plus提供的根据列表的index属性当成页面跳转路径 -->
        <template v-for="(item, index) in routerList" :key="item.path">
            <!-- 不带下拉的菜单 -->
            <el-menu-item :index="item.path">
                <el-icon>
                    <IconMenu v-if="item.meta.title.indexOf('首页') > -1"></IconMenu>
                    <Setting v-if="item.meta.title.indexOf('设置') > -1"></Setting>
                    <Avatar v-if="item.meta.title.indexOf('员工') > -1"></Avatar>
                    <Lock v-if="item.meta.title.indexOf('权限') > -1"></Lock>
                    <Histogram v-if="item.meta.title.indexOf('社保') > -1"></Histogram>
                    <Document v-if="item.meta.title.indexOf('审批') > -1"></Document>
                    <AlarmClock v-if="item.meta.title.indexOf('考勤') > -1"></AlarmClock>
                    <Postcard v-if="item.meta.title.indexOf('工资') > -1"></Postcard>
                    <Connection v-if="item.meta.title.indexOf('组织') > -1"></Connection>
                </el-icon>
                <template #title>{{ item.meta.title }}</template>
            </el-menu-item>
        </template>
    </el-menu>
</template>
<script lang="ts" setup>
import 'element-plus/theme-chalk/display.css'
import {
    Document,
    Avatar,
    Lock,
    Histogram,
    Menu as IconMenu,
    Setting,
    Connection,
    Postcard,
    AlarmClock
} from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
const store = useStore()
const router = useRouter()
const routerList: any = router.options.routes[0].children
console.log(routerList)
const route = useRoute()
console.log(route.path)
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>
  
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.el-menu {
    border: 0 !important;
}

.logo {
    height: 32px;
    margin: 16px;
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    text-align: center;
    line-height: 32px;
}
</style>
  